<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Faeple</title>
    
    <link href="/resources/css/bootstrap.css" rel="stylesheet">
    <link href="/resources/css/ionic.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/resources/css/font-awesome.css">
    <link rel="stylesheet" href="/resources/css/ionicons.min.css">
    <link rel="stylesheet" href="/resources/css/select2.css">
    <style type="text/css">
    	body {
			font-family:"Nanum Barun Gothic","맑은 고딕","Malgun Gothic","Apple SD Gothic Neo","돋움",dotum,Arial,sans-serif;
			line-height:1.428571429;
			color:#333;
		}
		.header{height:44px;background-color:#fff;border-bottom:1px solid #ddd;position:fixed;top:0;width:100%;z-index:30;}
		.title{width:100%;text-align:center;font-size:15px;position:absolute;top:-6px;}
		.left-btn{position:absolute;left:0;top:0;font-size:14px;border:0;background-color:#fff;display:block;z-index:20;width:30px;height:43px;}
		.right-btn{position:absolute;right:6px;top:5px;font-size:14px;border:0;background-color:#fff;display:block;z-index:20;}
		
		.item{
			white-space: normal!important;
			font-size:14px;
		}
		#notification-list li{
			padding-top: 6px;
			border-bottom: 1px solid #efefef;
			padding-bottom: 6px;
			position: relative;
		}
		#notification-list li:first-child{border-top:0!important;}
		#notification-list li:focus,
		#notification-list li:hover{
			background-color: #f5f5f5;
		}
		#notification-list li > a > span{
			display: inline-block;
	    	height: 100%;
	    	vertical-align: middle;
		}
		#notification-list .refer_profileImg{
			position: absolute;
			left: 6px;
			top: 50%;
			margin-top: -17.5px;
			width:35px;
			height:35px;
		}
		#notification-list img{
			width: 35px;
			height: 35px;
		}
		#notification-list .refer_postImg{
			position: absolute;
			right: 6px;
			top: 50%;
			margin-top: -17.5px;
			width:35px;
			height:35px;
		}
		#notification-list .noti_follow{
			position: absolute;
			right: 6px;
			top: 50%;
			margin-top: -17.5px;
			border: 1px solid #d5d5d5;
			background-color: #fff;
			height: 35px;
			width:51px;
		}
		#notification-list .noti-content{
			display: block;
			padding: 9px 50px;
			word-break: break-all;
			font-size:13px;
		}
		#notification-list .noti-date{
			margin-left: 8px;
			font-size: 11px;
			color: #cacaca;
		}
		.alert{
			width:600px;
			position: fixed;
			z-index: 9999;
			left: 50%;
			margin-left:-300px;
			top: 10px;
			-webkit-transform: translateY(-120%);
			-o-transform: translateY(-120%);
			-moz-transform: translateY(-120%);
		    transform: translateY(-120%);
			-webkit-transition:all 0.3s ease-in-out;
			-o-transition:all 0.3s ease-in-out;
			-moz-transition:all 0.3s ease-in-out;
			transition:all 0.3s ease-in-out;
		}
		.alert.in{
			-webkit-transform: translateY(0);
			-o-transform: translateY(0);
			-moz-transform: translateY(0);
		    transform: translateY(0);
		}
		@media screen and (max-width: 768px){ .alert{width:90%; left:5%; margin:0;} }
    </style>
</head>

<body>
<!-- header -->
<div class="header">
	<button onclick="history.back();" class="left-btn" style="color: #017AFC;"><i class="fa fa-chevron-left" style="font-size:16px;"></i></button>
	<h1 class="title"><spring:message code="head.notifications" text="알림" /></h1>
	<button onclick="location.href='/settings#notifications';" class="right-btn" style="border: 0; color: #017AFC;"><i class="icon ion-gear-a" style="font-size:22px;"></i></button>
</div>
<!-- header -->
<!-- list -->
<div style="padding-top:44px;">
	<ul class="list" id="notification-list"></ul>
	<button class="button button-block button-stable" id="more-notification" onclick="noti_index += 8; getNotiList();">더 불러오기</button>
</div>
<!-- list -->
<div class="mobile-footer-menu" style="display: none;">
	<ul>
		<li><a href="/"><i class="icon ion-home"></i></a></li>
		<li class="mf_on"><a href="/m_notifications"><i class="fa fa-bell" style="font-size:24px;position: relative;"><span class="badge alert-danger" style="position: absolute; left:8px; top:-6px; display: none;" id="m_notiCount"></span></i></a></li>
		<li><a href="/m_writeForm"><i class="icon ion-camera"></i></a></li>
		<li><a href="/m_messages"><i class="icon ion-chatbubble" style="position: relative;"><span class="badge alert-danger" style="position: absolute; left:12px; top:-2px; display: none; font-style: normal;" id="m_messageCount"></span></i></a></li>
		<li><a href="/${userDto.id}"><i class="icon ion-person"></i></a></li>
	</ul>
</div>
<script src="/resources/js/jquery-1.11.0.js"></script>
<script src="/resources/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/resources/js/jquery.ui.touch-punch.min.js"></script>
<script src="/resources/js/jquery.autosize.min.js"></script>
<script src="/resources/js/jquery.form.js"></script>
<script src="/resources/js/select2.min.js"></script>
<script type="text/javascript">
	var noti_count = 0;
	var noti_index = 0;
	
	function alertShow(type, message, dealy){
		var $el = $("<div class='alert alert-"+type+"'><button type='button' onclick='alertHide(this)' class='close'>×</button>"+message+"</div>");
		$("body").append($el);
		if(dealy != null){
			setTimeout(function(){$el.addClass("in");},100);
			setTimeout(function(){$el.removeClass("in");setTimeout(function(){$el.remove();},300);}, dealy);
		}
	}
	function alertHide(el){
		var $el = $(el).parent();
		$el.removeClass("in");
		setTimeout(function(){$el.remove();},300);
	}
	
  	function timeleft(time){
		var startDate = new Date(time.substring(0,4),time.substring(5,7),time.substring(8,10),time.substring(11,13),time.substring(14,16),00);
		var dt = new Date();
		var endDate  = new Date(dt.getFullYear(),dt.getMonth()+1 ,dt.getDate() ,dt.getHours() ,dt.getMinutes() ,00);
		var time_left = (endDate.getTime() - startDate.getTime()) / 60000;
		var time = 1000*60*60*24;
		if(time_left == 0){
			time_left = "<spring:message code='post.time.now' javaScriptEscape='true'/>";
		}else if(time_left < 60){
			time_left += "<spring:message code='post.time.mins' javaScriptEscape='true'/>";
		}else if(time_left < 1440){
			time_left = parseInt(time_left/60)+"<spring:message code='post.time.hours' javaScriptEscape='true'/>";
		}else if(time_left > 1440){
			var e_day = parseInt((endDate.getTime() - startDate.getTime()) / time);
			time_left = e_day+"<spring:message code='post.time.days' javaScriptEscape='true'/>";
 			if(e_day > 29){
 				var e_month = parseInt((endDate.getTime() - startDate.getTime()) / (time*30));
 				time_left = e_month+"<spring:message code='post.time.months' javaScriptEscape='true'/>";
 			}
 			if(e_month > 11){
 				time_left = parseInt((endDate.getTime() - startDate.getTime()) / (time*30*12))+"<spring:message code='post.time.years' javaScriptEscape='true'/>";
 			}
		}
		return time_left;
  	}
	
	function getNotiList(){
		if(noti_index==0){
			$("#notification-list").empty();
		}
		$.ajax({
		    type : "get"
		    , url : "/getNotiList?idx=${userDto.idx}&index="+noti_index
		    , dataType : "json"
		    , timeout : 5000
		    , error : function(request, status, error) {
		    	$("#notification-list").html("<li class='item' style='text-align:center;'>알림을 불러올 수 없습니다</li>");
		    	$("#more-notification").hide();
		    }
		    , success : function(response) {
		    	if(!response.length == 0){
		    		for(var i=0;i<response.length;i++){
		    			var html = "<li class='item'><a href='/"+response[i].author_id+"' class='refer_profileImg'><span></span><img src='/resources/upload/profile/thumbnail/"+response[i].refer_profileImage+"'></a><span class='noti-content'>"+response[i].description+"<span class='noti-date'>"+timeleft(response[i].create_date)+"</span></span>";
		    			if(response[i].type == "following"){
		    				html += "<button type='button' title='팔로우' class='noti_follow' onclick='noti_follow(this, \"follow\", "+response[i].author_idx+")' style='white-space: nowrap;'><i class='icon ion-person-add' style='font-size:20px; color:#3F729B;'></i></button></li>";
		    			}else{
		    				html += "<a href='/p/"+response[i].refer_url+"' class='refer_postImg'><span></span><img src='/resources/upload/post/thumbnail/"+response[i].refer_img+"'></a></li>";
		    			}
		    			$("#notification-list").append(html);
			    	}
		    		if(response.length > 7){
		    			$("#more-notification").show();
		    		}else{
		    			$("#more-notification").hide();
		    		}
		    		$("#notiCount").hide();
		    		$("#notiDis").attr("title", "확인하지 않은 알림 없음");
		    	}else{
		    		if(noti_index == 0){
		    			$("#notification-list").html("<li class='item' style='text-align:center;'>알림이 없습니다</item>");
		    			$("#clearNoti").hide();
		    		}
		    		$("#more-notification").hide();
		    	}
		    }
		    , beforeSend: function() {
		    	$('#notifications-loading').show(); 
		    }
		    , complete: function() {
		    	$('#notifications-loading').hide();
		    }
		});
	}

	function noti_follow(obj, type, idx) {
		var data = "following_idx="+idx;
		if (type == "follow") {
		  	$(obj).html("<img src='/resources/img/loading-15x15-white.gif' style='width:16px;height:16px;'>");
		  	setTimeout(function(){
		  		$.ajax({
		                type: "post",
		                url: "/follow",
		                data: data,
		                dataType: "text",
		                timeout: 5000,
		                error: function () {
		                    alertShow("danger", "다시 시도해주세요", 2000);
		                },
		                success: function (response) {
		                    if (response == "success") {
		                        $(obj).html("<i class='fa fa-check' style='font-size:13px; color:#3F729B;'></i>&nbsp;<i class='glyphicon glyphicon-user' style='font-size:13px; color:#3F729B;'></i>").attr("onclick", "noti_follow(this, 'unfollow', "+idx+");").hide().fadeIn();
		                    } else if (response == "closed") {
		                        alertShow("danger", "팔로우를 받지 않는 사용자입니다", 2000);
		                        $(obj).html("<i class='fa fa-plus' style='font-size:10px; color:#3F729B;'></i>&nbsp;<i class='glyphicon glyphicon-user' style='font-size:13px; color:#3F729B;'></i>").hide().fadeIn();
		                    } else if (response == "role") {
		                        alertShow("danger", "로그인이 필요합니다", 2000);
		                        $(obj).html("<i class='fa fa-plus' style='font-size:10px; color:#3F729B;'></i>&nbsp;<i class='glyphicon glyphicon-user' style='font-size:13px; color:#3F729B;'></i>").hide().fadeIn();
		                    } else {
		                        alertShow("info", "이미 팔로우 하였습니다.", 2000);
		                        $(obj).html("<i class='fa fa-plus' style='font-size:10px; color:#3F729B;'></i>&nbsp;<i class='glyphicon glyphicon-user' style='font-size:13px; color:#3F729B;'></i>").hide().fadeIn();
		                    }
		                }
		            });
		  	}, 1000);
		} else {
		  	$(obj).html("<img src='/resources/img/loading-15x15-white.gif' style='width:16px;height:16px;'>");
		  	setTimeout(function(){
		  		$.ajax({
		                type: "post",
		                url: "/unFollow",
		                data: data,
		                dataType: "text",
		                timeout: 5000,
		                error: function () {
		                    alertShow("danger", "다시 시도해주세요", 2000);
		                },
		                success: function (response) {
		                    if (response == "fail") {
		                        alertShow("danger", "다시 시도해주세요", 2000);
		                        $(obj).html("<i class='icon ion-person-add' style='font-size:20px; color:#3F729B;'></i>").hide().fadeIn();
		                    } else {
		                        $(obj).attr("onclick", "noti_follow(this, 'follow', "+idx+");").html("<i class='icon ion-person-add' style='font-size:20px; color:#3F729B;'></i>").hide().fadeIn();
		                    }
		                }
		            });
		  	}, 1000);
		}
	}
	
	function notiClear(){
		if(confirm("모든 알림내역을 지우시겠습니까?")){
			$.ajax({
				type : "get"
				, url : "/notiClear?idx="+userIdx
				, dataType : "text"
				, timeout : 5000
				, error : function(x,e) {
					alertShow("danger","다시 시도해주세요", 2000);
				}
				, success : function(response) {
					if(response == "execute"){
						$("#notification-list").html("<p style='text-align: center; font-weight:bold;'>표시할 알림이 없습니다</p>");
						$("#notiDis").attr("title", "확인하지 않은 알림 없음");
						$("#clearNoti").hide();
					}else{
						alertShow("danger","다시 시도해주세요", 2000);
					}
				}
				, beforeSend: function() {
					$('#ajax_indicator2').show().fadeIn('fast'); 
				}
				, complete: function() {
					$('#ajax_indicator2').fadeOut('fast');
				}
			});
		}
	}
	
	$(function(){
		getNotiList();
	});
</script>
</body>
</html>